class CourseList {
    constructor(tag) {
        this.obTag = document.querySelector(tag)
        this.data_list = []
        this.data_type3=[]
        this.initial()
    }
    async initial() {
        // 获取banner图片url
        await this.getImgUrl()
        // 获取课程列表数据
        await this.getCourseList()
        // 绑定事件
        await this.bindEvent()
    }
    async bindEvent() {
        var objInfobox = document.querySelectorAll(".productitem-infobox")
        
        console.log(objInfobox,"333333333")
        for(let i=0;i<objInfobox.length;i++){
         
            objInfobox[i].onclick=()=>{
                var row_index=objInfobox[i].parentElement.dataset.index
                var cloum_index=objInfobox[i].dataset.index
                console.log(row_index,cloum_index)
                console.log(this.data_type3[row_index].products[cloum_index],"被点击了！！！")
                var productId=this.data_type3[row_index].products[cloum_index].productId
                var courseTypeId=this.data_type3[row_index].products[cloum_index].extra.courseTypeId
                console.log(this.data_type3[row_index].products[cloum_index].productId,"被点击了！！！")
                console.log(objInfobox[i].parentElement.dataset.index,"被点击了！！！")
                
                location.href=`./details.html?userAuthType=0&agent=0&productId=${productId}&courseTypeId=${courseTypeId}&type=detail&plate=`

            }
        }
    }
    async getImgUrl() {
        var pro_res = await fetch("https://apis.wanxue.cn/base/v2/mobile-banner?mod=1", {
            headers: {
                a: 12,
                forwardId: 70,
                h: "wanxue",
                p: 1,
                u: "ffffffff-8d13-a56b-7169-0c980033c587",
                v: 5020501
            }
        })
        var res = await pro_res.json()
        console.log(res)
        console.log(res.result[0].image)
        // 将获取的banner图片url添加在src属性上
        this.obTag.src = res.result[0].image
    }
    async getCourseList() {
        var pro_course_res = await fetch("https://apis.wanxue.cn/gaoshou/v1/sale-list/1342000182592393218", {
            headers: {
                a: 12,
                forwardId: 70,
                h: "wanxue",
                p: 1,
                u: "ffffffff-8d13-a56b-7169-0c980033c587",
                v: 5020501
            }
        })
        var res = await pro_course_res.json()
        console.log(res)
        this.data_list = res.result.goodsInfos
        // 将获取的商品列表渲染到页面
        this.renderPage(this.data_list)
        return res
    }
    async renderPage(data) {
        var objProConent = document.querySelector(".product-content")

        var objProBox = document.createElement("div")
        objProBox.classList.add("productbox")
        var arry_data = [] // 存放type===3的对象数据
        var arry_title = [] // 存放type===2的对象数据
        data.forEach(function (item) {
            if (item.type === 3) {
                arry_data.push(item)

            } else {
                arry_title.push(item)
            }
        })
        for (var i = 0; i < arry_title.length; i++) {
            var objProBox = document.createElement("div")
            objProBox.classList.add("productbox")
            objProBox.dataset.index=i
            var objTitle = document.createElement("div")
            objTitle.classList.add("productitem-title")
            objTitle.innerHTML = arry_title[i].marketType.name
            console.log(objTitle.innerHTML)
            objProBox.appendChild(objTitle)
            objProConent.appendChild(objProBox)


            arry_data[i].products.forEach((item,index) => {
                var objProduct = document.createElement("div")
                objProduct.classList.add("productitem-infobox")
                objProduct.dataset.index=index
                objProBox.appendChild(objProduct)
                if(item.price=="0.00"){
                    item.price="免费"
                }else{
                    item.price="￥"+item.price
                }
                objProduct.innerHTML += `
                <div class="havecoverMap">
                    <div class="lazy-img">
                        <img src="${item.coverMap}">
                    </div>
                    <div class="productitem-info">
                        <div class="productitem-name">
                            <div class="title-box">
                                
                                <span class="name">${item.name}</span>
                            </div>
                            <div class="price">${item.price}</div>
                        </div>
                        
                    </div>
                </div>
                `
            })

        }
        this.data_type3=arry_data
        console.log(arry_data, arry_title)
    }
    
}
console.log(new CourseList(".swipeItem_style>img"))
